<template>
  <div >
    <Nav :title="title"></Nav>
    <!-- 留言 -->
    <div class="top">
      <p>留言</p>
      <input v-model="text" class="txt-t" type="text" />
    </div>
    <!-- 电话 -->
    <div class="top">
      <p>电话</p>

      <input v-model="tel" class="txt-b" type="text" />
    </div>
    <button class="btn" @click="submit">提交</button>
  </div>
</template>

<script>
import { submitAction } from '@/api/user/user'
import { showToast } from 'vant'
import { ref } from 'vue'

export default {
  name: 'opinionApi',
  setup () {
    const text = ref('')
    const tel = ref('')
    const title = ref('意见反馈')
    const submit = async () => {
      if (text.value === '' && tel.value === '') {
        showToast('请填写内容')
      } else {
        const a = await submitAction({
          content: text.value,
          phone: tel.value,
          name: localStorage.getItem('nickName'),
          openId: localStorage.getItem('openId')
        })
        console.log(a)
      }
    }
    return { text, tel, submit, title }
  }
}
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  .header-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header-l {
      width: 95px;
      height: 44px;
    }

    .header-m {
      height: 50px;
      margin-right: 10%;
      font-size: 36px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
    }
  }
}
.top {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  .txt-t {
    width: 710px;
    height: 284px;
    border-style: none;
  }
}

.txt-b {
  width: 710px;
  height: 100px;
  border-style: none;
}
.btn {
  position: fixed;
  bottom: 5%;
  left: 20px;
  width: 710px;
  height: 90px;
  border-style: none;
  background: #cea62a;
  border-radius: 44.5px;
  color: #fff;
}
</style>
